<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <template id="t1">
      <div>
        <table border="1">
          <thead>
            <tr>
              <th>姓名</th>
              <th>年龄</th>
              <th>性别</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="user in users">
              <td>{{user.name}}</td>
              <td>{{user.age}}</td>
              <td>{{user.gender===1?'男':'女'}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </template>
    <script src="./vue.js"></script>
    <script>
      /*
      v-for
      1. v-for所在标签，会被重复创建
      2. 参数中数组元素个数，就是创建元素的个数（数组有几个元素，就创建几个dom对象）
      3. 局部变量 hobby 也会被创建多次，每次获取当前数组元素的值，只能在标签内部使用
     
      */
      const vm = new Vue({
        el: "#app",
        template: "#t1",
        data: {
          users: [
            { name: "jack", age: 20, gender: 1 },
            { name: "lili", age: 21, gender: 2 },
            { name: "lucy", age: 18, gender: 2 },
            { name: "tom", age: 19, gender: 1 },
          ],
        },
      });
    </script>
  </body>
</html>
